<template>
  <div class="pizzas-view--container">
    <h1>Pizzas</h1>
    <input v-model="search" placeholder="Search for a pizza" />
    <!-- <transition name="slidein" leave-active-class="rotate">
      <ul class="pizza-list" v-show="showList">
        <li v-for="pizza in searchResults" :key="pizza.id">
          <PizzaCard :pizza="pizza" />
        </li>
      </ul>
    </transition> -->

    <!-- <transition name="slidein" appear>
      <ul class="pizza-list">
        <li v-for="pizza in searchResults" :key="pizza.id">
          <PizzaCard :pizza="pizza" />
        </li>
      </ul>
    </transition> -->

    <transition-group name="fadein" tag="ul" appear>
      <li v-for="pizza in searchResults" :key="pizza.id">
        <PizzaCard :pizza="pizza" />
      </li>
    </transition-group>
  </div>
</template>
<script lang="ts" setup>
import {
  useRouter,
} from "vue-router";
import PizzaCard from "@/components/PizzaCard.vue";
import { useSearch } from "@/composables/useSearch";
import type { Pizza } from "@/types/Pizza";
import { watch, onBeforeMount, type Ref } from "vue";
import { usePizzasStore } from "@/stores/pizzas";
import { storeToRefs } from "pinia";

const props = defineProps({
  searchTerm: {
    type: String,
    required: false,
    default: "",
  },
});

import { ref } from "vue"
const showList = ref(false);


// setTimeout(()=>{
//     showList.value = true;
//     setTimeout(()=>{
//     showList.value = false;
//   }, 4000)}, 1000)




const router = useRouter();

const pizzasStore = usePizzasStore();

type PizzaSearch = {
  search: Ref<string>;
  searchResults: Ref<Pizza[]>;
};

const { pizzas } = storeToRefs(pizzasStore);

const { search, searchResults }: PizzaSearch = useSearch({
  items: pizzas,
  defaultSearch: props.searchTerm,
});

watch(search, (value, prevValue) => {
  if (value === prevValue) return;
  router.replace({ query: { search: value } });
});

onBeforeMount(() => {
  pizzasStore.fetchPizzas()
});
</script>
<style scoped>
ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pizzas-view--container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.slidein-enter-to {
  transform: translateX(0);
}

.slidein-enter-from {
  transform: translateX(-100%);
}

.slidein-leave-to {
  transform: translateX(200%);
}

.slidein-leave-from {
  transform: translateX(0);
}

.slidein-enter-active,
.slidein-leave-active {
  transition: transform 0.5s
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(45deg);
  }
  90% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.rotate {
  animation: rotate 5s;
}


.fadein-enter-active,
.fadein-leave-active {
  transition: all 2s;
}

.fadein-enter-from,
.fadein-leave-to {
  opacity: 0;
  transform: translate(20px);
}


</style>
